<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>

</head>
<body>
<div id="app">
    <h3>实验列表</h3>
    <ul>
        <li v-for="exp in filteredExperiments">
            {{exp.name}} ({{exp.cost}}m)
        </li>
    </ul>
</div>


<script>
    new Vue({
        el: '#app',
        data: {
            experiments: [
                {name: 'RHIC Ion Collider', cost: 650, field: 'Physics'},
                {name: 'Neptune Undersea Observatory', cost: 100, field: 'Biology'},
                {name: 'Violinist in the Metro', cost: 3, field: 'Psychology'},
                {name: 'Large Hadron Collider', cost: 7700, field: 'Physics'},
                {name: 'DIY Particle Detector', cost: 0, field: 'Physics'}
            ]
        },
        computed: {
            nonPhysics(){
                return this.experiments.filter(exp => exp.field !== 'Physics');
            },
            allExceptTerm(){
                return this.experiments.filter(exp => exp.field.indexOf(this.term) === -1);
            },
            lowCost(){
                return this.experiments.filter(exp => exp.cost <= 3000);
            },
            filteredExperiments(){
                return this.lowCost(this.nonPhysics(this.experiments));
            }
        },
        methods:{
            nonPhysics(list){
                return list.filter(exp => exp.field !== 'Physics');
            },
            lowCost(list){
                return list.filter(exp => exp.cost <= 3000);
            }
        }
    })
</script>

</body>
</html>